<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-col v-for="(item,index) in data" :key="index" :span="8">
        <div class="card">
          <div class="header">
            <div class="header-text">{{ item.title }}</div>
            <div class="action">
              <div class="view">查看<i class="el-icon-arrow-right" /></div>
            </div>
          </div>
          <div class="body">
            <div class="content">
              <div class="left">
                <div class="img">
                  <img :src="item.img">
                </div>
                <div class="cont">
                  <div class="text">{{ item.name }}</div>
                  <div class="value">{{ item.score }} <span class="sub">分</span></div>
                </div>
              </div>
              <div class="right">
                <div v-for="(sub,i) in item.arr" :key="index+'_'+i" class="right-block">
                  <div class="static">
                    <div v-for="(third,j) in sub.list" :key="index+'_'+i+'_'+j" class="item">
                      <div class="value">{{ third.value }}</div>
                      <div class="bar">
                        <div class="inner" :style="{height:`${third.rate}%`}" />
                      </div>
                      <div class="text">{{ third.name }}</div>
                    </div>
                  </div>
                  <div class="block-title">{{ sub.name }} ({{ sub.score }})</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      data:[
        {
          title: '惠济区公安机关',
          name: '赵警官',
          score: '95',
          img:require('@/assets/images/home/avatars.png'),
          arr: [
            {
              name: '填录',
              score: '260',
              list: [{ name: '完成率', value: 260, rate: 260 }, { name: '错误率', value: 0, rate: 0 }]
            },
            {
              name: '质量',
              score: '260',
              list: [{ name: 'A级', value: 259, rate: 259 }, { name: 'B级', value: 1, rate: 1 }, { name: 'C级', value: 0, rate: 0 }]
            }]

        },{
          title: '惠济区侦查协作办公室',
          name: '张主任',
          score: '98',
          img:require('@/assets/images/home/avatar.png'),
          arr: [
            {
              name: '填录',
              score: '156',
              list: [{ name: '完成率', value: 156, rate: 156 }, { name: '错误率', value: 0, rate: 0 }]
            },
            {
              name: '质量',
              score: '156',
              list: [{ name: 'A级', value: 156, rate: 156 }, { name: 'B级', value: 0, rate: 0 }, { name: 'C级', value: 0, rate: 0 }]
            }]

        },{
          title: '惠济区案件管理部门',
          name: '李主任',
          score: '80.3',
          img:require('@/assets/images/home/avatar.png'),
          arr: [
            {
              name: '填录',
              score: '200',
              list: [{ name: '完成率', value: 195, rate: 195 }, { name: '错误率', value: 5, rate: 5 }]
            },
            {
              name: '质量',
              score: '200',
              list: [{ name: 'A级', value: 195, rate: 195 }, { name: 'B级', value: 3, rate: 3 }, { name: 'C级', value: 2, rate: 2 }]
            }]
        },
        {
          title: '惠济区检察官办案单元',
          name: '王检',
          score: '85',
          img:require('@/assets/images/home/avatars.png'),
          arr: [
            {
              name: '填录',
              score: '60',
              list: [{ name: '完成率', value: 80, rate: 80 }, { name: '错误率', value: 2, rate: 2 }]
            },
            {
              name: '质量',
              score: '60',
              list: [{ name: 'A级', value: 60, rate: 60 }, { name: 'B级', value: 90, rate: 90 }, { name: 'C级', value: 80, rate: 80 }]
            }]

        },{
          title: '惠济区公安机关',
          name: '李警官',
          score: '89',
          img:require('@/assets/images/home/avatar.png'),
          arr: [
            {
              name: '填录',
              score: '166',
              list: [{ name: '完成率', value: 162, rate: 162 }, { name: '错误率', value: 4, rate: 4 }]
            },
            {
              name: '质量',
              score: '166',
              list: [{ name: 'A级', value: 162, rate: 162 }, { name: 'B级', value: 4, rate: 4 }, { name: 'C级', value: 0, rate: 0 }]
            }]

        },{
          title: '惠济区侦查协作办公室',
          name: '赵协',
          score: '98',
          img:require('@/assets/images/home/avatar.png'),
          arr: [
            {
              name: '填录',
              score: '122',
              list: [{ name: '完成率', value: 122, rate: 122 }, { name: '错误率', value: 0, rate: 0 }]
            },
            {
              name: '质量',
              score: '122',
              list: [{ name: 'A级', value: 121, rate: 121 }, { name: 'B级', value: 1, rate: 1 }, { name: 'C级', value: 0, rate: 0 }]
            }]

        },{
          title: '惠济区案件管理部门',
          name: '刘官',
          score: '95',
          img:require('@/assets/images/home/avatar.png'),
          arr: [
            {
              name: '填录',
              score: '360',
              list: [{ name: '完成率', value: 360, rate: 358 }, { name: '错误率', value: 2, rate: 2 }]
            },
            {
              name: '质量',
              score: '360',
              list: [{ name: 'A级', value: 360, rate: 355 }, { name: 'B级', value: 2, rate: 2 }, { name: 'C级', value: 0, rate: 0 }]
            }]

        },{
          title: '惠济区检察官办案单元',
          name: '张检',
          score: '78',
          img:require('@/assets/images/home/avatars.png'),
          arr: [
            {
              name: '填录',
              score: '267',
              list: [{ name: '完成率', value: 267, rate: 251 }, { name: '错误率', value: 16, rate: 16 }]
            },
            {
              name: '质量',
              score: '267',
              list: [{ name: 'A级', value: 267, rate: 251 }, { name: 'B级', value: 10, rate: 10 }, { name: 'C级', value: 6, rate: 6 }]
            }]

        },{
          title: '惠济区公安机关',
          name: '王公安',
          score: '81',
          img:require('@/assets/images/home/avatar.png'),
          arr: [
            {
              name: '填录',
              score: '160',
              list: [{ name: '完成率', value: 160, rate: 150 }, { name: '错误率', value: 10, rate: 10 }]
            },
            {
              name: '质量',
              score: '160',
              list: [{ name: 'A级', value: 160, rate: 150 }, { name: 'B级', value: 8, rate: 8 }, { name: 'C级', value: 2, rate: 2 }]
            }]

        },{
          title: '惠济区侦查协作办公室',
          name: '任协',
          score: '88',
          img:require('@/assets/images/home/avatar.png'),
          arr: [
            {
              name: '填录',
              score: '186',
              list: [{ name: '完成率', value: 186, rate: 184 }, { name: '错误率', value: 2, rate: 2 }]
            },
            {
              name: '质量',
              score: '186',
              list: [{ name: 'A级', value: 186, rate: 184 }, { name: 'B级', value: 2, rate: 2 }, { name: 'C级', value: 0, rate: 0 }]
            }]

        },{
          title: '惠济区案件管理部门',
          name: '马案管',
          score: '92',
          img:require('@/assets/images/home/avatar.png'),
          arr: [
            {
              name: '填录',
              score: '260',
              list: [{ name: '完成率', value: 259, rate: 259 }, { name: '错误率', value: 1, rate: 1 }]
            },
            {
              name: '质量',
              score: '260',
              list: [{ name: 'A级', value: 255, rate: 255 }, { name: 'B级', value: 5, rate: 5 }, { name: 'C级', value: 0, rate: 0 }]
            }]

        },{
          title: '惠济区检察官办案单元',
          name: '周检',
          score: '98',
          img:require('@/assets/images/home/avatars.png'),
          arr: [
            {
              name: '填录',
              score: '245',
              list: [{ name: '完成率', value: 245, rate: 245 }, { name: '错误率', value: 0, rate: 0 }]
            },
            {
              name: '质量',
              score: '245',
              list: [{ name: 'A级', value: 244, rate: 244 }, { name: 'B级', value: 1, rate: 1 }, { name: 'C级', value: 0, rate: 0 }]
            }]

        }
      ]
      /*data: new Array(12).fill('').map(() => ({
        title: '郑州市人民检察院',
        name: '赵敏',
        score: '80.3',
        arr: [
          {
            name: '填录',
            score: '60',
            list: [{ name: '完成率', value: 80, rate: 80 }, { name: '错误率', value: 2, rate: 2 }]
          },
          {
            name: '质量',
            score: '60',
            list: [{ name: 'A级', value: 60, rate: 60 }, { name: 'B级', value: 90, rate: 90 }, { name: 'C级', value: 80, rate: 80 }]
          }]

      }))*/
    }
  },
  methods: {
  }
}
</script>

<style scoped lang="scss">

.card {
  border-radius:4px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom:15px;
  user-select: none;
  .header {
    display:flex;
    align-items: center;
    justify-content: space-between;
    height:46px;
    padding:0 15px;
    background:url('~@/assets/images/home/bg.png') no-repeat center;
    background-size:100% 100%;
    .header-text {
      color:#fff;
      font-size:16px;
      font-weight:bold;
    }
    .view {
      background:#dce2f8;
      border-radius:20px;
      color:#305FB8;
      padding:8px 12px;
      padding-left:20px;
      font-size:13px;
      cursor:pointer;
      .el-icon-arrow-right {
        margin-left:4px;
      }
      &:active {
        background:#cad0e8;
      }
    }
  }
  .body {
    .content {
      display:flex;
      justify-content: space-between;
      padding:10px 20px;
      .left {
        text-align: center;
        margin-right:15px;
        .img {
          width:96px;
          height:96px;
          border-radius:100px;
          margin-bottom:8px;
          background:#f3f3f1;
        }
        .cont {
          .text {
            font-size:20px;
            margin-bottom:6px;
          }
          .value {
            font-size:22px;
            color:#305FB8;
            margin-right:-14px;
            font-weight: bold;
            .sub {
              font-size:60%
            }
          }
        }
      }
      .right {
        flex:1;
        overflow:hidden;
        display:flex;
        .right-block {
          flex:1;
          padding:0 10px;
          display:flex;
          flex-direction: column;
          .static {
            flex:1;
            overflow:hidden;
            display:flex;
            justify-content:center;
            .item {
              display:flex;
              flex-direction: column;
              white-space: nowrap;
              text-align: center;
              padding:0 6px;
              .value {
                font-size:12px;
                margin-bottom:4px;
              }
              .bar {
                flex:1;
                overflow:hidden;
                background:#ebeef9;
                border-radius:6px;
                position: relative;
                width:16px;
                margin:0 auto;
                .inner {
                  position:absolute;
                  bottom:0;
                  width:100%;
                  border-radius:6px;
                  background:#5181DB;
                }
              }
              .text {
                margin-top:4px;
                font-size:12px;
              }
              &:nth-child(2) .bar .inner {
                background:#DB7B51;
              }
            }
          }
          .block-title {
            margin-top:10px;
            width:100%;
            background:#305FB8;
            color:#fff;
            height:30px;
            line-height:30px;
            border-radius:8px;
            text-align: center;
            border:1px solid #305FB8;
          }
          &:nth-child(2){
            .block-title {
              background:#fff;
              border-color:1px solid #305FB8;
              color:#305FB8;
            }
            .static .item {
              .bar .inner {
                background:#DBAC51;
              }
              &:nth-child(2) .bar .inner {
                background:#52C8C9;
              }
              &:nth-child(3) .bar .inner {
                background:#6C66D9;
              }
            }
          }
        }
      }
    }
  }
}

</style>

